<template>
  <div class="session-list">
    <div class="history-header">
      <h4 class="history-title">历史会话</h4>
      <el-button size="small" @click="clearHistory" class="clear-btn">
        清空
      </el-button>
    </div>
    
    <div class="session-items">
      <div
        v-for="(session, index) in sessions"
        :key="session.id"
        class="session-item"
        @click="loadSession(session)"
        :class="{ active: currentSessionId === session.id }"
      >
        <div class="session-title">{{ session.title }}</div>
        <div class="session-time">{{ formatTime(session.timestamp) }}</div>
        <el-button
          size="small"
          type="danger"
          @click.stop="deleteSession(index)"
          class="delete-btn"
        >
          删除
        </el-button>
      </div>
    </div>
    
    <div v-if="sessions.length === 0" class="empty-state">
      <i class="fa-solid fa-comments"></i>
      <p>暂无历史会话</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['loadSession'])
const props = defineProps({
  currentSessionId: String
})

const sessions = ref([])

onMounted(() => {
  loadSessions()
})

const loadSessions = () => {
  const savedSessions = localStorage.getItem('chat_sessions')
  if (savedSessions) {
    sessions.value = JSON.parse(savedSessions)
  }
}

const saveSession = (sessionData) => {
  const existingIndex = sessions.value.findIndex(s => s.id === sessionData.id)
  if (existingIndex >= 0) {
    sessions.value[existingIndex] = sessionData
  } else {
    sessions.value.unshift(sessionData)
  }
  
  // 只保留最近10个会话
  if (sessions.value.length > 10) {
    sessions.value = sessions.value.slice(0, 10)
  }
  
  localStorage.setItem('chat_sessions', JSON.stringify(sessions.value))
}

const loadSession = (session) => {
  emit('loadSession', session)
}

const deleteSession = (index) => {
  sessions.value.splice(index, 1)
  localStorage.setItem('chat_sessions', JSON.stringify(sessions.value))
}

const clearHistory = () => {
  sessions.value = []
  localStorage.removeItem('chat_sessions')
}

const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now - date
  
  if (diff < 24 * 60 * 60 * 1000) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else {
    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
  }
}

// 暴露方法给父组件
defineExpose({
  saveSession
})
</script>

<style scoped>
.session-list {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.history-title {
  margin: 0;
  color: #1976D2;
  font-size: 16px;
  font-weight: 600;
}

.clear-btn {
  font-size: 12px;
  height: 24px;
  padding: 0 8px;
}

.session-items {
  flex: 1;
  overflow-y: auto;
}

.session-item {
  padding: 12px;
  margin-bottom: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.session-item:hover {
  background-color: rgba(25, 118, 210, 0.1);
  transform: translateX(2px);
}

.session-item.active {
  background-color: rgba(25, 118, 210, 0.2);
  border-left: 3px solid #1976D2;
}

.session-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-time {
  font-size: 12px;
  color: #666;
}

.delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  height: 20px;
  width: 40px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.session-item:hover .delete-btn {
  opacity: 1;
}

.empty-state {
  text-align: center;
  color: #999;
  padding: 40px 20px;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 768px) {
  .session-item {
    padding: 10px;
  }
  
  .session-title {
    font-size: 13px;
  }
  
  .session-time {
    font-size: 11px;
  }
}
</style>